<template>
  <div class="chart">
    <div
      id="chart"
      class="monitorContainer"
      :class="chartOption.xAxisData.length > 0 ? 'show' : 'hidden'"
    ></div>
    <empty-data-chart :is-empty="chartOption.xAxisData.length === 0" />
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import EmptyDataChart from '@/components/empty-data-chart/index.vue';

const props = defineProps({
  chartOption: {
    type: Object,
    default: () => ({}),
  },
});

// 坐标轴颜色
const axisStyleColor1 = ref('#D9D9D9');
const axisStyleColor2 = ref('#999999');

// 线的颜色
const lineStyleColorIn = ref('#FF5757'); // 入库
const lineStyleColorOut = ref('#57aaff'); // 出库

// 渐变的颜色
const areaStyleColorIn = new echarts.graphic.LinearGradient(
  0,
  0,
  0,
  1,
  [
    { offset: 0, color: 'rgba(255, 87, 87, 0.5)' },
    { offset: 0.3, color: 'rgba(255, 169, 169, 0.3)' },
    { offset: 1, color: 'rgba(255, 169, 169, 0)' },
  ],
  false
);

const areaStyleColorOut = new echarts.graphic.LinearGradient(
  0,
  0,
  0,
  1,
  [
    { offset: 0, color: 'rgba(87, 170, 255, 0.5)' },
    { offset: 0.3, color: 'rgba(169, 212, 255, 0.3)' },
    { offset: 1, color: 'rgba(169, 212, 255, 0)' },
  ],
  false
);

onMounted(() => {
  setOption();
});

const setOption = () => {
  const chartDom = document.getElementById('chart');
  const myChart = echarts.init(chartDom);

  let option = null;

  const grid = {
    left: '3%',
    right: '4%',
    top: '10%',
    bottom: '3%',
    containLabel: true,
  };

  nextTick(() => {
    setTimeout(() => {
      option = {
        title: {
          text: '总入库量与总出库量趋势图',
          left: 'center',
          top: '10',
          textStyle: {
            color: '#333333',
            fontWeight: 'bolder',
            fontSize: 14,
          },
        },
        grid: grid,
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          axisLine: {
            lineStyle: {
              color: axisStyleColor1.value,
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: axisStyleColor1.value,
            },
          },
          axisLabel: {
            align: 'center',
            color: axisStyleColor2.value,
          },
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          name: '数量',
          nameTextStyle: {
            color: axisStyleColor2.value,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: axisStyleColor2.value,
          },
          splitLine: {
            lineStyle: {
              color: axisStyleColor1.value,
            },
          },
        },
        series: [
          {
            name: '总入库量',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310, 400, 380, 350, 330, 600],
            smooth: true,
            lineStyle: {
              color: lineStyleColorIn.value,
              width: 3,
              shadowColor: 'rgba(222, 115, 127, 0.23)',
              shadowBlur: 10,
              shadowOffsetY: 8,
            },
            areaStyle: {
              color: areaStyleColorIn,
            },
          },
          {
            name: '总出库量',
            type: 'line',
            data: [150, 232, 201, 154, 190, 330, 220, 300, 280, 250, 230, 210],
            smooth: true,
            lineStyle: {
              color: lineStyleColorOut.value,
              width: 3,
              shadowColor: 'rgba(222, 115, 127, 0.23)',
              shadowBlur: 10,
              shadowOffsetY: 8,
            },
            areaStyle: {
              color: areaStyleColorOut,
            },
          },
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: axisStyleColor1.value,
              width: 2,
            },
          },
          formatter: function (params) {
            let result = '';
            params.forEach(item => {
              result += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:${item.color}"></span>${item.seriesName}: ${item.value}<br/>`;
            });
            return result;
          },
          backgroundColor: '#FFFFFF',
          borderColor: '#eef3f8',
          borderWidth: 1,
          textStyle: {
            color: '#8C8C8C',
          },
          padding: 12,
        },
      };
      myChart.setOption(option);
    }, 10);
  });
};
</script>